<!-- MechanismList.vue -->
<template>
    <div class="mechanism-list">
        <el-button
                class="upload-position"
                type="primary"
                icon="el-icon-upload"
                size="small" @click="goAdd">补录</el-button>
        <el-tabs v-model="active"
                 type="card"
                 @tab-click="handleClick">
            <el-tab-pane
                    v-for="(item,index) in types"
                    :key="index"
                    :label="item.label"
                    :name="item.value.toString()"></el-tab-pane>
        </el-tabs>
        <el-table
                v-loading="loading"
                :data="totalData"
                style="width: 100%">
            <el-table-column
                    prop="title"
                    label="标题"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="author"
                    label="作者"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="time"
                    label="日期"
                    width="180">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            type="info"
                            size="mini"
                            @click="toDetail(scope.row._id)">查看</el-button>
                     <el-button
                            size="mini"
                            type="danger"
                            @click="toUpdata(scope.row._id)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    export default{
        name:'TechList',
        data(){
            return {
                active: '0',
                dialogVisible : false,
                loading : false,
                currentTabs: [],
                totalData: [],   // 获取总数据
                currentData:[],   // 当前渲染的数据
                itemDetailData : {},
                // currentType: '0',
                types: [
                  {
                    label: '角色',
                    value: 0
                  }, {
                    label: '食物',
                    value: 1
                  }, {
                    label: '自然',
                    value: 2
                  }, {
                    label: '动物',
                    value: 3
                  }, {
                    label: '装备',
                    value: 4
                }]
            }
        },
        activated(){
            this.fetchData();
        },
        watch: {
            '$store.state.version' : function () {
                // this.fetchData();
            }
        },
        methods: {
            handleClick () {
                this.fetchData()
            },
            /**
             * 获取列表数据
             **/
            fetchData(){
                this.loading = true;
                this.axios.get('rule',{
                    params : {
                        version : this.$store.state.version,
                        type: parseInt(this.active)
                    }
                })
                    .then(res=>{
                        this.totalData = res.data;

                        this.loading = false;
                    })
            },
            /**
             * 获取详情数据
             **/
            toDetail(id){
                this.$router.push({
                    path : '/mechanism-detail',
                    query : {
                        id : id
                    }
                })
            },
            toUpdata(id){
                this.$router.push({
                    path : '/add-mechanism',
                    query : {
                        id : id
                    }
                })
            },
            goAdd(){
                this.$router.push('/add-mechanism')
            }
        }
    }
</script>

<style lang="scss" scoped>
.mechanism-list{
    position: relative;
    padding: 16px;
    .basic-attribute {
        height: 60px !important;
    }
    .margin-right-12{
        margin-right: 12px;
    }
    .not-have {
        // display: flex;
    }
    .upload-position{
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 1;
    }
    .material {
        display: flex;
        align-items: center;
        img {
            width: 32px;
        }
    }
    .material-img {
        width: 32px;
    }
}
</style>
